<template>
  <div id="table">
    <h2>------------------------------------2020/11/3------------------------------------</h2>
    <!-- 原生table -->
    <div>
      <h5>原生table</h5>
      <table table border="1" borderColor='#ccc' cellspacing="0" style="margin:0 auto">
        <tr>
          <th>日期</th>
          <th>姓名</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
          <td>
            <!-- :plain="true" ------窗体主体部分背景色透明 -->
            <el-button :plain="true" @click="open1">编辑</el-button>
            <el-button :plain="true" @click="open2" style="background-color:#ff634775">删除</el-button>
          </td>
        </tr>
      </table>
    </div>
    <!-- element ui--基础表格 -->
    <div>
      <h5>element ui--基础表格</h5>
      <el-table :data="list" style="width:60%;margin:0 auto;">
        <el-table-column label='日期' prop='date'></el-table-column>
        <el-table-column label='姓名' prop='name'></el-table-column>
        <el-table-column label='住址' prop='address'></el-table-column>
        <el-table-column label="操作">
          <el-button :plain="true" @click="open1">编辑</el-button>
          <el-button :plain="true" @click="open2" style="background-color:#ff634775">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <!-- element ui--自定义列模板 -->
    <div>
      <h5>element ui--自定义列模板</h5>
      <el-table :data="list" style="width:60%;margin:0 auto">
        <el-table-column label="日期" >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span>{{scope.row.date}}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <!-- <template slot-scope="scope">
            <div>{{scope.row.name}}</div>
          </template> -->
          <template slot-scope="scope">
            <!-- popover顺序很重要，需要跟触发对象在一起；其中placement是出现位置；el-popover下面，不含slot的内容是你自定义的提示内容；slot="reference"是放在触发对象上。 -->
            <!--  trigger是触发方式； -->
            <el-popover trigger="hover" placement="top">
              <p>姓名：{{scope.row.name}}</p>
              <p>地址：{{scope.row.address}}</p>
              <!-- slot="reference"放在触发对象上 -->
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{scope.row.name}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <el-button :plain="true" @click="open1">编辑</el-button>
          <el-button :plain="false" @click="open2" style="background-color:#ff634775">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
    <h2>------------------------------------2020/11/4------------------------------------</h2>
    <!-- element ui--固定表头 -->
    <div>
      <h5>element ui--固定表头与列</h5>
      <p>表头固定：为el-table设置一个固定高度，向下翻滚时表头孜自然固定</p>
      <p>列固定：在相应列(el-table-column)设置 fixed，默认left</p>
      <p>流体高度：当数据量不确定或变化较大时，可以通过max-height来设置最大高度</p>
      <el-table :data="tableDate" height="300px" style="width:60%;margin:0 auto">
        <el-table-column label='日期' prop="date" width="300"></el-table-column>
        <el-table-column label='姓名' prop="name" width="300"></el-table-column>
        <el-table-column label='地址' prop="address" width="300"></el-table-column>
        <el-table-column  fixed='right' width="200">
          <el-button :plain='true' @click="open1">编辑</el-button>
          <el-button :plain='true' @click="open2" style="background-color:#ff634775">删除</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  // el:'#table',
  data() {
    return {
      list: [
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        }
      ],
      tableDate: [
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        },
        {
          date: '2020-11-3',
          name: '小邓',
          address: '四川省成都市新津县',
        }
      ],
    }
  },
  methods: {
    open1() {
      this.$message('编辑')
    },
    open2() {
      this.$message.error('删除')
    },
  },
}
</script>

<style scoped>
td,th {
  padding: 5px ;
}
table{
  width: 60%;
}
.el-table th,
.el-table td{
  text-align: center;
}
</style>
